<script setup>
import { ref } from 'vue'
import NewKaoqinGroup from '@/components/attendanceComponents/SettingPage/GroupSetting/NewKaoqinGroup.vue'

const pageFlag = ref(0)

const emits = defineEmits(['removeNaviBar', 'removeBottomNaviBar'])

const clickNewKaoqinGroup = () => {
  emits('removeNaviBar', true)
  pageFlag.value = 1
  emits('removeBottomNaviBar', false)
}

const handleGoback = () => {
  emits('removeNaviBar', false)
  pageFlag.value = 0
  emits('removeBottomNaviBar', true)
}
</script>

<template>
  <!--  团队设置-->
  <view v-if="pageFlag === 0" class="container">
    <view class="sectionClass">
      <uni-section title="新建考勤组" title-color="#165DFF" @click="clickNewKaoqinGroup" title-font-size="32rpx">
        <template v-slot:decoration>
          <view
            style="display: flex; align-self: center; justify-content: center; margin-right: 24rpx"
          >
            <!--            <iconpark-icon fill="#165DFF" name="plus-circle"></iconpark-icon>-->
            <view style="display: flex; justify-content: center">
              <image
                src="@/static/icon/plus-circle.svg"
                style="width: 40rpx; height: 40rpx"
              ></image>
            </view>
          </view>
        </template>
        <template v-slot:right></template>
      </uni-section>
      <uni-section class="textClass" title="已有考勤组名字">
        <template v-slot:right>
          <view>
            <text>123人</text>
            <i class="iconfont icon-youjiantou"></i
          ></view>
        </template>
      </uni-section>
    </view>
    <view class="sectionClass">
      <uni-section title="班次管理">
        <template v-slot:right>
          <view class="textClass">
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </template>
      </uni-section>
      <uni-section title="员工消息设置">
        <template v-slot:right>
          <view class="textClass">
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </template>
      </uni-section>
    </view>
  </view>
  <!--  新建考勤组-->
  <NewKaoqinGroup v-if="pageFlag === 1" @goback="handleGoback" />
</template>

<style lang="scss" scoped>
.container {
  margin: 40rpx 32rpx 0rpx 32rpx;
}

.sectionClass {
  border-radius: 16rpx;
  margin-top: 32rpx;
  overflow: hidden;
}

.textClass {
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}
</style>
